<template>
  <!-- 骨架屏 -->
  <!-- <skeleton-item v-if="!detailValue.productData?.base_info" /> -->
  <view>
    <z-paging
      ref="paging"
      class="warpper"
      use-page-scroll
      v-model="recommendationList"
      :refresher-enabled="false"
      :default-page-size="10"
      safe-area-inset-bottom
      use-safe-area-placeholder
      @query="goodsRecommend"
    >
      <template #top>
        <view style="background-color: #fff">
          <navbar>
            <view class="connet-title"> 商品详情 </view>
          </navbar>
        </view>
      </template>
      <view class="product-content">
        <view class="content-banner">
          <image
            :src="`${
              isVerify
                ? goodsDeilts?.goods_pic
                : goodsDeilts?.goods_pic + '?draw=no'
            }`"
            ref="originalImageRef"
            id="original-image"
            mode="widthFix"
          ></image>
        </view>
        <view class="price"> <text>￥</text>{{ setPrice(goodsDeilts?.goods_old_price) || 0 }} </view>
        <view class="spld">
          <image src="@/assets/spld.svg"></image>
        </view>
        <view class="product-title" :class="{ clamp: showT }">
          <text ref="textRef">{{ goodsDeilts?.goods_name || "-" }}</text>
          <image
            @click="showTitle"
            :class="{ rotate180: !showT }"
            class="right-next"
            src="@/assets/select-next.svg"
          ></image>
        </view>
        <view class="product-info">
          <view
            class="item"
            @click="selectId = item.index"
            :class="{ active: selectId == item.index }"
            v-for="item in productInfo"
            :key="item.index"
            >{{ item.title }}</view
          >
        </view>
        <view class="product-info-content">
          <view
            v-if="selectId == 0"
            v-for="(item, index) in goodsDeilts?.goods_banner || []"
            class="product-info-image"
          >
            <image
              @click="toPreviewImage(goodsDeilts?.goods_banner, index)"
              :src="`${isVerify ? item : item + '?draw=no'}`"
              mode="widthFix"
              referrerPolicy="no-referrer"
            ></image>
          </view>
          <view class="product-info-list" v-if="selectId == 1">
            <view class="product-info-item">
              <view class="left">商品编号</view>
              <view class="right right-first">
                {{ goodsDeilts?.goods_no || "-" }}
                <image
                  @click="handleCopy(goodsDeilts?.goods_no)"
                  class="copy"
                  src="@/assets/copy.svg"
                ></image>
              </view>
            </view>
            <view class="product-info-item">
              <view class="left">游戏名称</view>
              <view class="right">
                {{ goodsDeilts?.game_name || "-" }}
              </view>
            </view>
            <view class="product-info-item">
              <view class="left">所属大区</view>
              <view class="right">
                {{ goodsDeilts?.attr_value || "-" }}
              </view>
            </view>
            <view class="product-info-item">
              <view class="left">服务器</view>
              <view class="right">
                {{ goodsDeilts?.serve_name || "-" }}
              </view>
            </view>
            <view class="product-info-item">
              <view class="left">上架时间</view>
              <view class="right right-last">
                {{ goodsDeilts?.create_time || "-" }}
              </view>
            </view>
          </view>
        </view>
        <image
          class="gotoTop"
          @click="scrollToTop"
          src="@/assets/toTop.svg"
        ></image>
      </view>
    </z-paging>
    <!-- 大图预览 -->
    <previewImageVue
      ref="previewImageRef"
      :img-list="allProductImgs"
      :isVerify="isVerify"
      v-model:currentImg="currentImg"
    ></previewImageVue>
  </view>
</template>
<script lang="ts" setup>
import Navbar from "@/components/navbar/index.vue";
import previewImageVue from "./components/preview-image.vue";
import { setImage, filterGame } from "@/util/filter-img";
import type { IFilterImg } from "@/util/filter-img";
import API from "@/api/baseUrl";
import { onLoad } from "@dcloudio/uni-app";
import { computed, ref, nextTick } from "vue";
const recommendationList = ref([]);
const selectId = ref(0);
const textRef = ref();
const goodsDeilts = ref({}) as any;
const previewImageRef = ref();
const allProductImgs = computed(() => {
  return goodsDeilts?.goods_banner || [];
});
const setPrice = (price: any) =>{
  try{
    if(price){
      return Number(price).toFixed(0);
    }else{
      return 0;
    }
  }catch(e){
    return 0;
  }
}
const currentImg = ref(0);
const productInfo = ref([
  {
    title: "商品图片",
    index: 0,
  },
  {
    title: "商品信息",
    index: 1,
  },
]);

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

//自动义
const toPreviewImage = (res: any, current: number) => {
  // currentImg.value = current;
  previewImageRef.value.open();
  previewImageRef.value.setImages(res);
  previewImageRef.value.setIsVerify(isVerify.value);
  nextTick(() => {
    previewImageRef.value.setCurrent(current);
  });
};
const originalImageRef = ref();
const cropImage = (event: any) => {
  const originalImage: any = document.getElementById("original-image");

  nextTick(() => {});
};

const previewImage = (res: any, current: number) => {
  uni.previewImage({
    urls: res,
    current: current,
    loop: true,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) {
        if (data.tapIndex == 0) {
          uni.downloadFile({
            url: res[data.index],
            success: function (res) {
              if (res.statusCode === 200) {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: "保存成功",
                      icon: "none",
                    });
                  },
                  fail: function (err) {
                    console.log(err.errMsg);
                  },
                });
              }
            },
          });
        }
      },
      fail: function (err) {
        console.log(err.errMsg);
      },
    },
  });
};

const handleCopy = (item: any) => {
  uni.setClipboardData({
    data: item,
    success: function () {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
    fail: function (err) {
      uni.showToast({
        title: "复制失败",
        icon: "none",
      });
    },
  });
};
const showT = ref(true);
const showTitle = () => {
  showT.value = !showT.value;
  if (showT.value) {
    applyEllipsis();
  } else {
    textRef.value.$el.textContent = goodsDeilts.value.goods_name;
  }
};
const applyEllipsis = () => {
  const textRefElement = textRef.value?.$el;
  const originalText = textRefElement.textContent;
  const words = originalText.split(" ");
  let visibleText = "";
  let lineCount = 0;
  const lineHeight = 1.5; // 根据实际需要调整行高
  const maxLines = 3;
  const maxLineHeight = lineHeight * maxLines;
  const maxTextLength = Math.floor(textRefElement.offsetWidth / 3.5);
  for (let i = 0; i < words.length; i++) {
    visibleText += words[i] + " ";
    textRefElement.textContent = visibleText;
    if (textRefElement.offsetHeight >= maxLineHeight) {
      if (visibleText.length > maxTextLength) {
        visibleText = visibleText.slice(0, maxTextLength - 10) + "…";
        break;
      }
    }
  }
  textRefElement.textContent = visibleText;
};
const goodsRecommend = (page: number, pageSize: number) => {};

onLoad((e) => {
  console.log(e);
  initDetils(e?.id || 0);
});
const isVerify = ref(false);
const initDetils = async (id: number) => {
  try {
    const res = await API.get_goods_detail({
      goods_id: id,
    });
    if (
      res?.data?.base_info?.verify_account &&
      res?.data?.base_info?.verify_account !== 3
    ) {
      const data: IFilterImg = filterGame(res?.data?.base_info?.game_id, 1, 0);
      setImage(
        res?.data?.base_info?.goods_pic + "?draw=no",
        (src: string) => {
          goodsDeilts.value.goods_pic = src;
        },
        data
      );
      if (Array.isArray(res?.data?.base_info?.goods_banner)) {
        isVerify.value = true;
        goodsDeilts.value.goods_banner = [];
        res?.data?.base_info?.goods_banner.forEach(
          (item: any, index: number) => {
            console.log(index);

            const data: IFilterImg = filterGame(
              res?.data?.base_info?.game_id,
              index == 0 ? 1 : 2,
              index
            );
            const imagesrc = item + "?draw=no";
            setImage(
              imagesrc,
              (src: string) => {
                goodsDeilts.value.goods_banner[index] = src;
              },
              data
            );
          }
        );
        goodsDeilts.value =
          {
            ...(res?.data?.base_info && typeof res?.data?.base_info === "object"
              ? res?.data?.base_info
              : {}),
            goods_banner: [],
            goods_pic: "",
          } || {};
      }
    } else {
      isVerify.value = false;
      goodsDeilts.value = res?.data?.base_info || {};
    }
    nextTick(() => {
      applyEllipsis();
    });
  } catch (err) {
    console.log(err);
  }
};
</script>
<style lang="scss" scoped>
:deep(.zp-scroll-view-super) {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-color: transparent transparent; /* Chrome 和 Safari */
  padding: 0px 24rpx;
}
@media screen and (min-width: 500px) {
  * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-color: transparent transparent; /* Chrome 和 Safari */
  }
  :deep(.z-paging-content) {
    width: 375px;
    margin: 0 auto;
  }
  :deep(.zp-page-top) {
    width: 375px;
    margin: 0 auto;
  }
  .gotoTop {
    position: fixed;
    z-index: 999;
    bottom: 70px;
    left: 55%;
    width: 100rpx;
    height: 100rpx;
  }
}
.product-content {
  position: relative;
}
.price {
  width: 100%;
  background-color: #fff;
  color: #fe4644;
  font-size: 40rpx;
  font-family: Archivo Black;
  font-weight: 400;
  padding: 20rpx 0px 14rpx 20rpx;
  text {
    font-size: 28rpx;
  }
}
.warpper {
  background: #fff;
  min-height: 100vh;
  //   padding: 24rpx 0px;
}
.clamp {
  display: -webkit-box; /* 使用webkit内核的盒模型 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  -webkit-line-clamp: 3; /* 限制显示的行数为3行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出时显示省略号 */
}
.product-info-image {
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding-top: 20rpx;
  border-radius: 10rpx;
  width: calc(100% - 40rpx);
  margin-left: 20rpx;
  margin-right: 20rpx;
  image {
    border-radius: 10rpx;
    width: 100%;
  }
}
.product-info-content {
  background-color: #fff;
}
.copy {
  width: 24rpx;
  height: 24rpx;
  margin-left: 5rpx;
}
.product-info-item {
  display: flex;
  .left {
    width: 221rpx;
    padding: 20rpx 0rpx 20rpx 30rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .right {
    padding: 20rpx 30rpx;
    flex: 1;
    background-color: #fff;
    color: #333333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .right-first {
    border-top-right-radius: 20rpx;
  }
  .right-last {
    border-bottom-right-radius: 20rpx;
    border-bottom: none !important;
  }
}
.product-info-list {
  border-radius: 20rpx;
  margin: 0px 30rpx;
  background: #f8f9fb;
  color: #999999;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 24rpx;
}
.product-info {
  margin-top: 20rpx;
  background-color: #fff;
  height: 75rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .item {
    flex: 1;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
  }
  .active {
    color: #000;
    font-weight: 600;
  }
}
.rotate180 {
  transform: rotate(180deg);
}
.right-next {
  position: absolute;
  right: 24rpx;
  bottom: 0px;
  width: 24rpx;
  height: 24rpx;
  z-index: 44;
}
.product-title {
  background-color: #fffbf9;
  margin: 0px 20rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
  color: #999999;
  font-size: 24rpx;
  padding: 0 24rpx;
  border-bottom: 15rpx solid #fff;
  position: relative;
}
.connet-title {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-banner {
  width: 100%;
  max-height: 420rpx;
  overflow: hidden;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
}
.spld {
  background: #fffbf9;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  margin: 0px 20rpx;
  height: 38rpx;
  padding-top: 20rpx;
  padding-left: 24rpx;
  padding-bottom: 10rpx;
  image {
    width: 119rpx;
    height: 100%;
  }
}
.gotoTop {
  position: fixed;
  z-index: 999;
  bottom: 70px;
  right: 10px;
  width: 100rpx;
  height: 100rpx;
}
</style>
